<template>
  <div class="user-info">
    <div class="left">
      <ul>
        <li :class="{ 'active': $route.path === '/myinfo/personalInfo' }" @click="$router.push('/myinfo/personalInfo')">
          个人信息</li>
        <li :class="{ 'active': $route.path === '/myinfo/accountInfo' }" @click="$router.push('/myinfo/accountInfo')">
          修改密码
        </li>
        <li :class="{ 'active': $route.path === '/myinfo/deleteAccount' }"
          @click="$router.push('/myinfo/deleteAccount')">
          注销用户
        </li>
      </ul>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  width: 70%;
  margin: .1667rem auto;

  .left {
    font-size: .3333rem;
    width: 20%;
    background-color: #f0f0f0;

    ul {
      padding: .1667rem;

      li {
        text-align: center;
        cursor: pointer;
        padding: .1667rem .1667rem;

        &:hover {
          background-color: #e0e0e0;
        }
      }

      .active {
        background-color: #b4b4b4;
      }
    }
  }

  .right {
    width: 80%;
    background-color: #f9f9f9;
  }
}
</style>